<template>
<div id="main">
  <vuedraggable v-model="chartData" class="drag">
    <div v-for="item in chartData" :key="item.id" class="chart-item" :class="classes==item.id? 'full' :''">
      <div class="chart" ></div>
      <a-icon :type="chartType" class="aicon" @click="screen(item.id)"/>
    </div>
  </vuedraggable>
</div>
</template>
<script>

import axios from 'axios'
import vuedraggable from 'vuedraggable'
export default {
  name: "Echart",
  components:{vuedraggable},
  computed: {
    fullType(){
      if(true){
        return 'full'
      }
    }
  },
  async created(){
    document.body.ondrop = function(event) {
    event.preventDefault();
    event.stopPropagation();
    };
    this.chartData =  (await axios.get('https://www.fastmock.site/mock/0287ee4356690e49574dbd9ee3568586/mymock_test/api/chart')).data.data.chartData
  },
  data () {
    return {
      classes: -1,
      newData: [],
      chartType:'fullscreen',
      charts:[],
      chartData:[],
    };
  },
  // beforeRouteLeave (to, from, next) {
  //   // 导航离开该组件的对应路由时调用
  //   // 可以访问组件实例 `this`
  //   for(var i=0;i<this.chartData.length;i++){
  //     this.chartData[i].sort = i;
  //   }
  //   this.newData = this.chartData;
  //   next();
  // },
  watch:{
    chartData(newData, oldData){
      this.chartData = newData
      this.$nextTick(()=>{
        for(let i = 0; i < this.chartData.length; i++){
          this.charts[i] = this.$echarts.init(document.getElementsByClassName("chart")[i])
          this.charts[i].setOption(this.chartData[i])
        }
      })
      
    }
  },
  methods:{
    toOther(){
      this.$router.push({ path: "/user/login"})
    },
    screen(val){
      if(this.chartType == "fullscreen"){
        this.chartType = "fullscreen-exit";
      }else{
        this.chartType = "fullscreen";
      }
      this.classes == val? this.classes = -1: this.classes = val
      this.$nextTick(()=>{
        this.charts[val].resize();
      })
      
    },
    loadEchart(){
      for(let i = 0; i < this.chartData.length; i++){
        this.charts[i].resize();
      }
    }
  },
}
</script>
<style lang="less" scoped>
  #main { 
    // padding: 30px 0;
    .drag{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .chart-item {
        width: 49.5%;
        min-width: 500px;
        position: relative;
        .aicon {
          position: absolute;
          right: 0;
          top: 40px;
          width: 50px;
          height: 50px;
          // background: chocolate;
        }
      }

      .chart {
        width: 100%;
        height: 400px;
        margin-top: 24px;
        background: #fff;
      }

      .full {
        width: 100%  !important;
        height: 70vh !important;
        order:-2;
      }
    }
  }
</style>